<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <div class="profile-container">
        <div class="sidebar-menu">
          <div class="menu-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
          </div>
          <div class="menu-item" :class="{ active: activeTab === 'theme' }" @click="activeTab = 'theme'">
            <el-icon><Brush /></el-icon>
            <span>主题设置</span>
          </div>
          <div class="theme-switch">
            <span>主题切换</span>
            <el-switch
              v-model="isDarkMode"
              inline-prompt
              :active-icon="Moon"
              :inactive-icon="Sunny"
              @change="toggleTheme"
            />
          </div>
        </div>
        
        <div v-if="activeTab === 'profile'" class="content-container">
          <div class="avatar-container">
          <el-avatar :size="100" :src="userStore.avatar" />
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="uploadAvatar"
            :show-file-list="false"
            accept="image/*"
          >
            <el-button type="primary" size="small">更换头像</el-button>
          </el-upload>
        </div>
        <div class="info-container">
          <el-form :model="userInfo" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="userInfo.username" disabled />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" />
            </el-form-item>
            <el-form-item label="角色">
              <el-tag v-for="role in userInfo.roles" :key="role.id" class="role-tag">
                {{ role.name }}
              </el-tag>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateProfile">保存修改</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <div v-else-if="activeTab === 'theme'" class="content-container">
          <div class="theme-container">
            <h3>主题设置</h3>
            <div class="theme-options">
              <div 
                class="theme-option" 
                :class="{ active: themeStore.theme === 'light' }" 
                @click="themeStore.toggleTheme(); themeStore.theme = 'light'"
              >
                <div class="theme-preview light-theme">
                  <div class="preview-header"></div>
                  <div class="preview-sidebar"></div>
                  <div class="preview-content"></div>
                </div>
                <div class="theme-name">明亮主题</div>
              </div>
              
              <div 
                class="theme-option" 
                :class="{ active: themeStore.theme === 'dark' }" 
                @click="themeStore.toggleTheme(); themeStore.theme = 'dark'"
              >
                <div class="theme-preview dark-theme">
                  <div class="preview-header"></div>
                  <div class="preview-sidebar"></div>
                  <div class="preview-content"></div>
                </div>
                <div class="theme-name">夜间主题</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { useThemeStore } from '@/store/theme'
import { ElMessage } from 'element-plus'
import { Moon, Sunny } from '@element-plus/icons-vue'
import { getInfo, updateProfile as updateUserProfile } from '@/api/user'

const userStore = useUserStore()
const themeStore = useThemeStore()
const activeTab = ref('profile')

// 计算属性：是否为暗黑模式
const isDarkMode = computed({
  get: () => themeStore.theme === 'dark',
  set: (value) => {
    themeStore.theme = value ? 'dark' : 'light'
  }
})

// 切换主题
const toggleTheme = () => {
  themeStore.toggleTheme()
}
const userInfo = ref({
  username: '',
  name: '',
  email: '',
  phone: '',
  roles: []
})

onMounted(async () => {
  try {
    const { data } = await getInfo()
    userInfo.value = {
      username: data.username,
      name: data.name,
      email: data.email || '',
      phone: data.phone || '',
      roles: data.roles || []
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
})

const updateProfile = async () => {
  try {
    await updateUserProfile({
      name: userInfo.value.name,
      email: userInfo.value.email,
      phone: userInfo.value.phone
    })
    ElMessage.success('个人信息更新成功')
    // 更新store中的用户名
    userStore.name = userInfo.value.name
  } catch (error) {
    console.error('更新个人信息失败:', error)
    ElMessage.error('更新个人信息失败')
  }
}

const uploadAvatar = async (options) => {
  try {
    const formData = new FormData()
    formData.append('avatar', options.file)
    
    // 这里应该调用上传头像的API
    // const { data } = await uploadUserAvatar(formData)
    
    // 模拟上传成功
    setTimeout(() => {
      ElMessage.success('头像上传成功')
      // 更新store中的头像
      // userStore.avatar = data.url
    }, 1000)
  } catch (error) {
    console.error('上传头像失败:', error)
    ElMessage.error('上传头像失败')
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  
  .box-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    
    :deep(.el-card__header) {
      background-color: var(--card-bg-color);
      border-bottom: 1px solid var(--border-color);
      border-radius: 8px 8px 0 0;
      
      .card-header {
        span {
          color: var(--text-color);
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
    
    :deep(.el-card__body) {
      background-color: var(--card-bg-color);
      padding: 30px;
    }
  }
}

.profile-container {
  display: flex;
  gap: 20px;
  
  .sidebar-menu {
    width: 180px;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      margin-bottom: 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s;
      color: var(--text-color);
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
      
      &:hover {
        background-color: var(--hover-bg-color);
      }
      
      &.active {
        background-color: #ecf5ff;
        color: #409eff;
      }
    }
    
    .theme-switch {
      margin-top: 20px;
      padding: 12px 16px;
      border-top: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--text-color);
    }
  }
  
  .content-container {
    flex: 1;
    min-width: 0;
  }
  
  .avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--hover-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    
    .el-avatar {
      border: 3px solid var(--card-bg-color);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .avatar-uploader {
      .el-button {
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
  
  .info-container {
    flex: 1;
    min-width: 400px;
    
    .el-form {
      .el-form-item {
        margin-bottom: 24px;
        
        .el-form-item__label {
          color: var(--text-color);
          font-weight: 500;
          font-size: 14px;
        }
        
        .el-input {
          .el-input__wrapper {
            border-radius: 6px;
            transition: all 0.3s ease;
            
            &:hover {
              border-color: #c0c4cc;
            }
            
            &.is-focus {
              border-color: #409eff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
            
            &.is-disabled {
              background-color: var(--hover-bg-color);
              border-color: var(--border-color);
              color: #c0c4cc;
            }
          }
        }
        
        .role-tag {
          margin-right: 8px;
          margin-bottom: 8px;
          border-radius: 4px;
          font-weight: 500;
          padding: 4px 12px;
          background-color: #ecf5ff;
          color: #409eff;
          border: 1px solid #b3d8ff;
        }
        
        .el-button {
          border-radius: 6px;
          font-weight: 500;
          padding: 12px 24px;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }
  
  .theme-container {
    padding: 20px;
    
    h3 {
      margin-top: 0;
      margin-bottom: 20px;
      color: var(--text-color);
    }
    
    .theme-options {
      display: flex;
      gap: 20px;
      
      .theme-option {
        width: 180px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.3s;
        
        &.active {
          border-color: #409eff;
        }
        
        .theme-preview {
          height: 120px;
          position: relative;
          
          &.light-theme {
            background-color: #f0f2f5;
            
            .preview-header {
              background-color: #ffffff;
            }
            
            .preview-sidebar {
              background-color: #ffffff;
            }
            
            .preview-content {
              background-color: #f8f9fa;
            }
          }
          
          &.dark-theme {
            background-color: #1f1f1f;
            
            .preview-header {
              background-color: #2b2b2b;
            }
            
            .preview-sidebar {
              background-color: #2b2b2b;
            }
            
            .preview-content {
              background-color: #1f1f1f;
            }
          }
          
          .preview-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 20px;
          }
          
          .preview-sidebar {
            position: absolute;
            top: 20px;
            left: 0;
            bottom: 0;
            width: 40px;
          }
          
          .preview-content {
            position: absolute;
            top: 20px;
            left: 40px;
            right: 0;
            bottom: 0;
          }
        }
        
        .theme-name {
          padding: 10px;
          text-align: center;
          background-color: var(--card-bg-color);
          color: var(--text-color);
          border-top: 1px solid var(--border-color);
        }
      }
    }
  }
}

// 上传组件样式优化
:deep(.el-upload) {
  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 8px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    gap: 20px;
    
    .sidebar-menu {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid var(--border-color);
      padding-right: 0;
      padding-bottom: 10px;
      margin-bottom: 20px;
      display: flex;
      overflow-x: auto;
      
      .menu-item {
        margin-bottom: 0;
        margin-right: 10px;
        white-space: nowrap;
      }
    }
    
    .avatar-container {
      align-self: center;
      width: 100%;
      max-width: 200px;
    }
    
    .info-container {
      min-width: auto;
    }
    
    .theme-options {
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
